<template>
  <div class="box">
    <el-card>
      <template #header>
        <h3>菜品分类列表</h3>
      </template>
      <!-- 数据区域 -->
      <el-table :data="tableData" border>
        <el-table-column prop="shop_name" label="店铺名称"></el-table-column>
        <el-table-column prop="category_name" label="菜品分类"></el-table-column>
        <el-table-column label="操作">
          <template #header>
            <el-button type="primary" @click="handleAdd" size="small">
              添加分类
            </el-button>
          </template>
          <template #default="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">
              编辑
            </el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
            <el-button type="success" @click="toFoodView(scope.row)">
              查询菜品
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
    </el-card>
    <el-dialog v-model="dialogFormVisible" :title="title" width="500">
      <el-form :model="foodCategoryForm">
        <el-form-item label="菜品分类名称">
          <el-input
            v-model="foodCategoryForm.category_name"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addData"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import * as foodApi from '@/api/food.js'
export default {
  data() {
    return {
      // 弹窗
      dialogFormVisible: false,
      title: "添加菜品分类",
      // 弹窗中的表单数据
      foodCategoryForm: {},
      // 数据列表
      tableData: [],
    };
  },
  methods: {
    toFoodView(row){
      this.$router.push({
        path:'/food',
        query:{
          shopId:row.shop_id,
          categoryId:row.category_id
        }
      })
    }

  },
  created () {
    let shopId = this.$route.query.shopId;

    if(!shopId){
      this.$router.push("/shopList");
      return;
    }

    //发起异步请求,查询所有菜品分类信息  shop_id
    foodApi.foodCategoryListApi(
      {
        shopId,
        op:'find'
      }).then((response)=>{
        this.tableData = response.data;
    })
  }
};
</script>

<style scoped></style>
